<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{index.html}">
<body>
<div class="container" layout:fragment="content">
    <!--/*@thymesVar id="challenge" type="org.owasp.wrongsecrets.challenges.ChallengeUI"*/-->
    <p class="h1 mt-2"><span th:text="${challenge.name}" th:attr="data-cy=challenge-title"/> <span th:block
                                                                                                   th:text="${challenge.stars}"></span>
    </p>

    <p><span th:text="'Welcome to challenge ' + ${challenge.name} + '.'"></span></p>

    <div class="alert alert-primary" role="alert">
        <h6 class="alert-heading">🔍 Your Task</h6>
        <p class="mb-2">Find the secret hidden in the <strong><a href="https://github.com/OWASP/wrongsecrets" target="_blank">WrongSecrets repository</a></strong>. This challenge focuses on <strong th:text="${challenge.tech}">secret management</strong>.</p>
        <p class="mb-0">💡 <strong>Look for:</strong> Configuration files, source code, environment variables, Docker files, or cloud infrastructure related to this challenge.</p>
    </div>
    <div class="row">
        <div class="offset-lg-1 col-lg-10 col-md-12" th:attr="data-cy=challenge-description">
            <div th:replace="~{doc:__${challenge.explanation}__}"></div>
        </div>


        <div class="col-12" th:text="${challengeCompletedAlready}"></div>
        <div class="col-12 feedback alert alert-success" role="alert" th:if="${answerCorrect!=null}"
             th:text="${answerCorrect}" th:attr="data-cy='success-alert'"></div>
        <div class="col-12 feedback alert alert-danger" role="alert" th:if="${answerIncorrect!=null}"
             th:text="${answerIncorrect}" th:attr="data-cy='incorrect-alert'"></div>
        <form action="#" th:action="${challenge.link}" th:object="${challengeForm}" method="post">
            <div class="mb-3">
                <label for="answerfield" class="form-label"><strong>🔑 Enter the secret you found:</strong></label>
                <input type="text" class="form-control" id="answerfield" th:field="*{solution}"
                       placeholder="Type the secret here..." th:attr="data-cy='answer-textbox'"/>
                <small class="form-text text-muted">💡 Tip: Secrets are often strings, numbers, or encoded values. Copy and paste exactly what you find.</small>
            </div>
            <div class="d-none d-lg-inline">
                <button class="btn btn-primary" type="submit" name="action" value="submit"
                        th:attr="data-cy='submit-textbox-btn'">🚀 Submit Answer
                </button>
                <button class="btn btn-secondary"
                        onclick="document.getElementById('answerfield').value='';event.preventDefault();"
                        th:attr="data-cy='clear-textbox-btn'">🗑️ Clear
                </button>
            </div>
            <div class="d-lg-none mt-2">
                <button class="btn btn-primary" type="submit" name="action" value="submit">🚀 Submit Answer</button>
                <button class="btn btn-secondary"
                        onclick="document.getElementById('answerfield').value='';event.preventDefault();">🗑️ Clear
                </button>
            </div>
            <div class="col-12 mt-3">
                <button class="btn btn-warning" type="submit" name="action" value="reset"
                        th:attr="data-cy='reset-btn'">🔄 Reset Challenge
                </button>
                <a th:if="${hintsEnabled==true}" th:attr="data-cy='show-hints-btn'" class="btn btn-info"
                   data-bs-toggle="collapse"
                   href="#collapseHint" role="button"
                   aria-expanded="false" aria-controls="collapseHint">
                    💡 Show Hints
                </a>
                <a th:if="${reasonEnabled==true}" th:attr="data-cy='whats-wrong-btn'" class="btn btn-info"
                   data-bs-toggle="collapse"
                   href="#collapseExplain" role="button"
                   aria-expanded="false" aria-controls="collapseExplain">
                    🔍 What's Wrong?
                </a>
            </div>
            <div th:if="${hintsEnabled==true}" th:attr="data-cy='hint-paragraph'"
                 class="offset-lg-1 col-lg-10 col-md-12 collapse mt-2 mb-2"
                 id="collapseHint">
                <div class="card card-body">
                    <div th:replace="~{doc:__${challenge.hint}__}"></div>
                </div>
            </div>
            <div th:if="${reasonEnabled==true}" th:attr="data-cy='whats-wrong-paragraph'"
                 class="offset-lg-1 col-lg-10 col-md-12 collapse mt-2 mb-2"
                 id="collapseExplain">
                <div class="card card-body">
                    <div th:replace="~{doc:__${challenge.reason}__}"></div>
                </div>
            </div>
        </form>
    </div>
    <br/>
    <div class="row">
        <div th:replace="~{fragments/navigation :: navigation}"></div>

        <div class="progress">
            <div class="progress-bar" role="progressbar" th:style="'width:'+${progress}+'%;'"
                 th:attr="aria-valuenow=${progress}, data-cy='progress-bar'" aria-valuemin="0" aria-valuemax="100"
                 th:text="${totalPoints}"></div>
        </div>

        <div th:if="${missingEnvWarning!=null}" class="alert alert-danger" role="alert"
             th:attr="data-cy='disabled-alert'">[(${missingEnvWarning})]
        </div>
    </div>
    <div class="modal fade" id="finishedModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Congratulations!</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>You have finished all the doable challenges! Congratulations!</p>
                    <p>We hope you have enjoyed the ride! And have learned something about the pitfalls in secrets
                        management. </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
